介绍

2024-03-24 07:26| 来源: 网络整理| 查看: 265

# 介绍 # 准备

开始之前请务必先了解 Vue (opens new window) 和 JsonSchema (opens new window)

# 体验 Playground 演示 (opens new window) Vue可视化活动编辑器 (opens new window) 可视化表单Schema生成器 (opens new window) # 多版本选择

支持如下Vue版本和Ui框架，结合你的项目框架选择版本。

各版本api和使用形式99%一致，仅有如下差异：

各版本差异

vue3 emit事件都会去掉on前缀，详细看这里事件 Emit Event vue3 antd Vue v-model 不使用 modelValue props，这里需要做个转换，详细参见 # @lljj/vue-json-schema-form 适配ui库：Vue2 ElementUi 注意需要全局注册Element相关组件，也可根据控制台提示按需use package name: @lljj/vue-json-schema-form umd cdn地址：@lljj/vue-json-schema-form cdn (opens new window) umd script 标签形式引入暴露全局变量 window.vueJsonSchemaForm，window.vueJsonSchemaForm.default 暴露组件，同时会注册 VueForm 全局组件 playground (opens new window) # @lljj/vue2-form-iview3 适配ui库：Vue2 iview3 注意需要全局注册 iview3 相关组件，也可根据控制台提示按需use package name: @lljj/vue2-form-iview3 umd cdn地址：@lljj/vue2-form-iview3 cdn (opens new window) umd script 标签形式引入暴露全局变量 window.vue2FormIview3，window.vue2FormIview3.default 暴露组件，同时会注册 vue2FormIview3 全局组件 playground (opens new window) # @lljj/vue3-form-element 适配ui库：Vue3 ElementPlus 注意需要全局注册 ElementPlus 相关组件，也可根据控制台提示按需use package name : @lljj/vue3-form-element umd cdn地址：@lljj/vue3-form-element cdn (opens new window) umd script 标签形式引入暴露全局变量 window.vue3FormElement，window.vue3FormElement.default 暴露组件 playground (opens new window) # @lljj/vue3-form-naive 适配ui库：Vue3 naive 注意需要全局注册 vue3 naive 相关组件，也可根据控制台提示按需use package name : @lljj/vue3-form-naive umd cdn地址：@lljj/vue3-form-naive cdn (opens new window) umd script 标签形式引入暴露全局变量 window.vue3FormNaive，window.vue3FormNaive.default 暴露组件 playground (opens new window) # @lljj/vue3-form-ant 适配ui库：Vue3 antdv 注意需要全局注册 vue3 antdv 相关组件，也可根据控制台提示按需use package name : @lljj/vue3-form-ant umd cdn地址：@lljj/vue3-form-ant cdn (opens new window) umd script 标签形式引入暴露全局变量 window.vue3FormAnt，window.vue3FormAnt.default 暴露组件 playground (opens new window)

antd 4x 版本注意：

v4版本请使用，import { JsonSchemaFormAntdV4 } from "@lljj/vue3-form-ant"; v3版本还是建议使用 default export # vue3 ant、naiveUi v-model 特殊处理

例如 a-input 组件，ant vue3需要使用 v-model:value，但在整个框架内部 v-model 都是使用 modelValue，所以这里就需要对不一致的props通过中间组件组做转换。

你可以自行转换，也可以使用内置方法 modelValueComponent 转换，如下：

// 返回一个接受 modelValue 和 update:modelValue v-model的组件 import { modelValueComponent } from '@lljj/vue3-form-ant'; const MyFixInputComponent = modelValueComponent('a-input', { model: 'value' // 这里要根据ant组件 model的参数传递 }); // naive 也是类似操作 import { modelValueComponent } from '@lljj/vue3-form-naive'; const MyFixInputComponent = modelValueComponent('n-input', { model: 'value' // 这里要根据naive组件 model的参数传递 });

提示

这样使用起来还是有些麻烦，目前已经对常用的Widget组件做了内置，参见 ant、naiveUi vue 附加全局Widget组件

# 快速开始

后续的文档都以 @lljj/vue-json-schema-form 为例

# npm # 安装 npm install --save @lljj/vue-json-schema-form # yarn yarn add @lljj/vue-json-schema-form 使用 import VueForm from '@lljj/vue-json-schema-form'; import Vue from 'vue'; // 全局注册或者可以在组件内注册 Vue.component('VueForm', VueForm); # script引入 # script引入 # DEMO

演示渲染用户信息的表单，点击显示代码可查看源代码或者在codepen运行

export default { name: 'Demo', data() { return { formData: {}, schema: { type: 'object', required: [ 'userName', 'age', ], properties: { userName: { type: 'string', title: '用户名', default: 'Liu.Jun', }, age: { type: 'number', title: '年龄' }, bio: { type: 'string', title: '签名', minLength: 10, default: '知道的越多、就知道的越少', } } }, uiSchema: { bio: { 'ui:options': { placeholder: '请输入你的签名', type: 'textarea', rows: 1 } } } }; } }; 显示代码复制代码 | 在线运行# 基本概念

通过 JSON Schema 生成对应的form表单

schema title 属性作为 form表单的标题 schema description 属性作为表单的描述

基于组件递归的形式，逐级渲染数据，如下图：（点击放大）

其中涉及到两个概念，Field、Widget

Field 用来渲染每一个节点对应的组件，可以是任意节点，一般组件内会包含 FormItem 组件 Widget 用来渲染用户输入信息的组件，如 input ，select，被 FormItem 组件包裹

Field Widget 都可以通过ui-schema自定义，详细方法可以查看自定义Field、自定义Widget

# 暴露方法 import VueForm, { getDefaultFormState, fieldProps, vueUtils, formUtils, schemaValidate, i18n } from '@lljj/vue-json-schema-form'; # VueForm

默认导出 VueForm组件

# getDefaultFormState

通过 JSON Schema 计算当前 FormState 的值

参数：(schema, formData, rootSchema, includeUndefinedValues) schema object 需要计算的schema formData object 当前的 formData 值，没有可以传 undefined rootSchema object 需要计算的schema的根节点schema includeUndefinedValues boolean 是否包含未定义的值，默认 true

不使用 ui-schema ui:field 一般不会使用

# fieldProps

Field props配置，如果需要使用 ui:field 自定义field 组件，需要使用它定义组件props

不使用 ui-schema ui:field 一般不会使用

# vueUtils

提供一些内部Vue相关的utils方法，详细的可以参见源码 (opens new window)

不使用 ui-schema ui:field 一般不会使用

# formUtils

提供一些内部Form相关的utils方法，详细的可以参见源码 (opens new window)

不使用 ui-schema ui:field 一般不会使用

# schemaValidate

提供一些内部校验schema相关的方法，详细的可以参见源码 (opens new window)

不使用 ui-schema ui:field 一般不会使用

# 说明遵循 JSON Schema 规范，只需要给定 JSON Schema，即可生成对应的form表单快速配置个性化ui视图和校验错误信息，可适配常用的ui库，可通过配置适配ElementUi，iView 或者你自己开发的组件库等表单schema校验使用 ajv (opens new window) 设计思想和对schema解析索引参考 react-jsonschema-form (opens new window) 最后更新时间: 10/5/2023, 1:52:28 PM

配置（API） →

【本文地址】

公司简介

联系我们